<template>
	<div class="edit-popup">
		<popup ref="popupRef" :async="true" width="650px" :clickModalClose="true" @close="handleClose"
			:footershow="false" :showClose="false" customClass="previewDialog">
			<div class="bor">
				<div style="position: absolute;right: 10px;top: 10px;" v-if="showImage">
					<!-- 待入库 -->
					<img v-if="options.listColumn?.slave_colour==1" class="zhang" :src="dairuku" alt="">
					<img v-if="options.listColumn?.slave_colour=='待出库'" class="zhang" :src="daichuku" alt="">
					<img v-if="options.listColumn?.slave_colour=='已入库'" class="zhang" :src="yiruku" alt="">
					<!-- 已作废 -->
					<img v-if="options.listColumn?.slave_colour==3" class="zhang" :src="yibaofei" alt="">
					<img v-if="options.listColumn?.slave_colour=='已驳回'" class="zhang" :src="yibohui" alt="">
					<img v-if="options.listColumn?.slave_colour=='待审核'" class="zhang" :src="daishenhe" alt="">
					
					<img v-if="options.listColumn?.slave_colour=='已报废'" class="zhang" :src="yibaofei" alt="">
					<img v-if="options.listColumn?.slave_colour=='待报废'" class="zhang" :src="daibaofei" alt="">
                    
                    <!-- 一入库 -->
                    <img v-if="options.listColumn?.slave_colour==2" class="zhang" :src="yiruku" alt="">

				</div> 
				<el-form label-width="120px" label-position="right">
					<el-row>
						<el-col :span="span">
							<el-form-item label="物料编码">
								<fontGoBeyond :text="options.listColumn.no" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="名称">
								<fontGoBeyond :text="options.listColumn.title" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="分类">
								<fontGoBeyond
									:text=" booktypefilter(options.listColumn.cate_name,options.listColumn.category_id)" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="单位">
								<fontGoBeyond :text="options.listColumn.unit_name" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="规格">
								<fontGoBeyond :text="options.listColumn.spec" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="型号">
								<fontGoBeyond :text="options.listColumn.model" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="属性一">
								<fontGoBeyond :text="options.listColumn.alias" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="属性二">
								<fontGoBeyond :text="options.listColumn.other" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="登记牌证号">
								<fontGoBeyond :text="options.listColumn.registration_no" />
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="特种设备注册代码">
								<fontGoBeyond :text="options.listColumn.registration_code" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="备注">
								<fontGoBeyond :text="options.listColumn.remark" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import dairuku from '@/assets/images/dairuku.png'
	import daichuku from '@/assets/images/daichuku.png'
	import yiruku from '@/assets/images/yiruku.png'
	
	import yibohui from '@/assets/images/yibohui.png'
	import daishenhe from '@/assets/images/daishenhe.png'
	import yibaofei from '@/assets/images/yibaofei.png'
	import daibaofei from '@/assets/images/daibaofei.png'
  
	import {
		admindetail
	} from '@/api/materials/product'
	import fontGoBeyond from '@/components/fontGoBeyond/index.vue'
	import Popup from '@/components/popup/index.vue'
	const props = defineProps({
		showImage:{
			type:Boolean,
			default:false
		},
	})
	const emit = defineEmits(['success', 'close'])
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const mode = ref('add')
	const span = ref(12)
	const options = reactive({
		listColumn: [] as any[]
	})


	const getOptions = (data : any) => {
		admindetail({
			id: data.slave,
		}).then((data : any) => {
			options.listColumn = data
		})
	}
	const booktypefilter = (list : any, id : any) => {
		if (list) {
			const obj = list.find((val : any) => val.id == id)
			return obj ? obj.name : null
		}
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	const setFormData = (data : Record<any, any>) => {
		getOptions(data)
	}

	const handleClose = () => {
		emit('close')
	}


	defineExpose({
		open,
		setFormData
	})
</script>
<style lang="scss" scoped>
	$bor-color: #eeeff0;

	.zhang {
		width: 100px;
		height: 100px;
		transform: rotate(20deg);
		opacity: 0.6;
	}

	.bor {
		// border-top: 1px solid $bor-color;
		border-left: 1px solid $bor-color;
		// border-right: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;
		// padding: 0 10px;

	}

	.el-col {
		border-right: 1px solid $bor-color;
		border-top: 1px solid $bor-color;
		align-items: center;
		padding: 7px;
	}

	.el-form-item {
		margin-bottom: 0;
	}

	::v-deep .el-form-item__label {
		border-left: 0;
		border-top: 0;
		border-bottom: 0;
		margin-right: 10px;
	}

	::v-deep .el-col {
		padding: 0px;
	}

	::v-deep .el-dialog__header {
		padding-top: 0;
		padding-bottom: 0;
	}

	::v-deep .previewDialog .el-dialog {
		.el-dialog__header {
			display: none;
		}

		.dj-dialog-content {
			padding: 0;
			overflow: unset;
		}
	}
</style>